import React, { } from 'react'
import { Row, Col } from 'antd'
import { backgroundObj } from '@/utils/utils'
import './index.less'
const Navigation = (props) => {
    const { data = {} } = props
    const { count = 4, list = [], borderRadius: borderRadius, iconSize, borderFlag = false, backgroundColor, backgroundImage, textStyle, fontColor, top, bottom, fontSize, paddingTop, paddingLeft, backgroundType } = data
    const span = count === 5 ? 4 : parseInt(24 / count)
    const renderBg = () => {
        if (backgroundType !== 'image') {
            return {
                background: backgroundColor
            }
        } else {
            return {
                ...backgroundObj(backgroundImage)
            }
        }
    }

    return <Row justify={'space-between'} style={{
        borderRadius: borderRadius,
        border: borderFlag ? '1px solid #eee' : 'none', padding: `${paddingTop}px ${paddingLeft}px`, marginTop: top, marginBottom: bottom, ...renderBg()
    }} className='wxPage_navigation' >
        {
            list.map((val, index) => {
                const { title, src } = val
                return <Col key={index} span={span}>
                    <div className={iconSize === 'small' ? 'wxPage_navigation_imgBox' : 'wxPage_navigation_imgBigBox'}>
                        <img className='wxPage_navigation_img' src={src} />
                    </div>
                    <div style={{ fontWeight: textStyle === 'default' ? '100' : 'bold', color: fontColor, fontSize: fontSize }} className='wxPage_font'>
                        {title}
                    </div>
                </Col>
            })
        }
    </Row >
}
export default Navigation